<template>
    <section>
        <component :is="type_list[info.type]&&type_list[info.type]['com'] " :info="info">
        </component>
    </section>
</template>

<script setup>
import HotImage from './HotImage.vue'
import Banner from './Banner.vue'
import Space from './Space.vue'
import Header from './Header.vue'
import Nav from './Nav.vue'
import FlexImg from './FlexImg.vue'
import Alr from './Alr.vue'
import BannerGoods from './BannerGoods.vue'
import ModuleGoods from './ModuleGoods.vue'
const props = defineProps({
    info: {
        type: Object,
        default: {
            type: ''
        }
    }
})

const { info } = toRefs(props)

const type_list = ref({
    Header: {
        name: '头部配置',
        icon: 'Header',
        type: 'Header',
        com: Header
    },
    HotImage: {
        name: '热区图片',
        icon: 'PictureRounded',
        type: 'HotImage',
        com: HotImage
    },
    Banner: {
        name: '轮播',
        icon: 'PictFilmure',
        type: 'Banner',
        com: Banner
    },
    Space: {
        name: '占位高度',
        icon: 'FullScreen',
        type: 'Space',
        com: Space
    },
    Nav: {
        name: '导航栏',
        icon: 'Menu',
        type: 'Nav',
        com: Nav
    },
    FlexImg: {
        name: '并排图',
        icon: 'Picture',
        type: 'FlexImg',
        com: FlexImg
    },
    Alr: {
        name: '左轮播右广告',
        icon: 'ScaleToOriginal',
        type: 'Alr',
        com: Alr
    },
    BannerGoods: {
        name: '轮播商品',
        icon: 'SwitchFilled',
        type: 'BannerGoods',
        com: BannerGoods
    },
    ModuleGoods: {
        name: '模块商品',
        icon: 'GoodsFilled',
        type: 'ModuleGoods',
        com: ModuleGoods
    }
})

</script>

<style scoped lang="scss">
section {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    overflow-y: scroll;
}
</style>